<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="viewport" content="width=https://gitee.com/zhangBo11/zhufeng_turntable_2112.git, initial-scale=1.0"> -->
    <title>lucky2</title>

    <style>
        #my-lucky {
            margin: 0 auto;

        }
    </style>
</head>

<body>
    <div id="my-lucky"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.11"></script>
<script>
    // 大转盘引入luckywheel
    const myLucky = new LuckyCanvas.LuckyWheel('#my-lucky', {
        width: '300px',
        height: '300px',

        prizes: [{
                background: 'red',
                fonts: [{
                    text: 0
                }],

            },
            {
                background: 'green',
                fonts: [{
                    text: 1
                }],

            },
            {
                background: 'blue',
                fonts: [{
                    text: 2
                }],

            },
            {
                background: '#efefef',
                fonts: [{
                    text: 3
                }],

            },
            {
                background: 'yellow',
                fonts: [{
                    text: 4
                }],

            },
            {
                background: 'red',
                fonts: [{
                    text: 5
                }],

            },
            {
                background: 'green',
                fonts: [{
                    text: 6
                }],

            },
            {
                background: 'blue',
                fonts: [{
                    text: 7
                }],

            },

        ],
        buttons: [{
            radius: 30,
            pointer: true,
            background: 'orange',

            // imgs: [{
            //     src: './img/btn.png',
            //     top:'-30px',
            //     width: '100%',
            //     height: '100%',
            // }],
        }, {
            radius: 20,
            background: 'blue',
            fonts: [{
                text: '开始',
                top: '-10px',
                fontColor: '#fff',
                fontSize: 16
            }],
        }],
        defaultStyle: {
            background: '#b8c5f2'
        },
        defaultConfig: {
            // stopRange: 50
        },
        start: function () {
            myLucky.play()
            setTimeout(() => {
                myLucky.stop(5)
            }, 1000)
        },
        end: function () {
            console.log(1111111111);
            alert('抽到了奖品5')
        }
    })
</script>

</html>